<template>
	<view :class="{ light: theme == 'light' }" class="content " >
		<view class="status_bar"><view class="top_view"></view></view>
		<view class="ptb10 w100 tc flex alcenter between fixed bgPart head pr10">
			<view class="pl10"><image class=" headImg" @click="show" src="/static/image/head.png" mode="widthFix"></image></view>
			<view class=" posRelt">
				<view class="flex alcenter" @tap="isshowlang = !isshowlang">
					<text>{{ languages[lang].name }}</text>
					<image :src="languages[lang].img" class="wt15 h12 ml5"></image>
				</view>
				<view class="abstrot bggray plr8 wt90 radius4" style="right: 0;top:60upx" v-show="isshowlang">
					<view class="flex alcenter  ptb10 between bdb1f langs" v-for="(item, i) in languages" :key="i" @tap="changeLang(i)">
						<text>{{ item.name }}</text>
						<image :src="item.img" class="wt15 h12 ml5"></image>
					</view>
				</view>
			</view>
		</view>
		<swiper
			class="swiper w100 mt50"
			:indicator-dots="true"
			:autoplay="true"
			:interval="3000"
			:circular="true"
			indicator-color="#aaa"
			indicator-active-color="#eee"
		>
			<swiper-item v-for="(item, index) in bannerList" :key="index"><image class="w100 ht100" :src="item.thumbnail"></image></swiper-item>
		</swiper>
		<view class="w100 plr10 bgPart">
			<view class=" flex alcenter bdb_blue3">
				<image src="../../static/image/new1.png" class="wt20 h20"></image>
				<swiper class="w100 h40 ml10" :vertical="true" :autoplay="true" :interval="3000" :circular="true">
					<swiper-item class="flex alcenter" v-for="(item, i) in noticeList" :key="i">
						<navigator :url="'/pages/home/newsDetail?id=' + item.id">{{ item.title }}</navigator>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<swiper display-multiple-items="3" class="ptb10 h100 w100 bgPart" v-if="quoListSwier.length">
			<swiper-item :style="{transform: 'translate('+(i*100)+'%, 0px)'}" class="flex alcenter around" v-for="(item, i) in quoListSwier" v-if="item.is_display==1" :key="i">
				<navigator
					:url="'/pages/market/kline?legal_id=' + item.legal_id + '&currency_id=' + item.currency_id + '&symbol=' + item.currency_name + '/' + item.legal_name"
					class="flex column alcenter"
				>
					<text class="ft12">{{ item.currency_name }}/{{ item.legal_name }}</text>
					<text class="ft18 bold" :class="{ red2: parseFloat(item.change) < 0, green: parseFloat(item.change) >= 0 || item.change == '' }">{{ item.now_price }}</text>
					<text class="ft12" :class="{ red2: parseFloat(item.change) < 0, green: parseFloat(item.change) >= 0 || item.change == '' }">
						{{ item.change.substr(0, 1) == '-' ? '' : '+' }}{{ (item.change - 0) | toFixed2 }}%
					</text>
					<!-- <text class="ft12 blue4">≈ {{ ((item.now_price - 0) * (item.rmb_relation - 0)) | toFixed2 }} CNY</text> -->
				</navigator>
			</swiper-item>
		</swiper>
		<view class="flex alcenter plr10 w100 ptb5">
			<navigator url="/pages/assets/charge?currency=3&name=usdt" class="flex flex2 alcenter between bgPart plr10 radius4" style="height: 85px;">
				<view class="flex column ht100 jscenter">
					<text class="ft16 bold">{{ $t('home.fast') }}</text>
					<text class="blue4 ft12 mt5">{{ $t('home.zhichi') }}</text>
				</view>
				<image class="wt50 h40" src="/static/image/legal_card.png"></image>
			</navigator> 
			<view class="flex column between flex1 ml5">
			
				<navigator url="/pages/ieo/index" class="flex alcenter bgPart plr10 radius4 h40 " style="height: 40px;">
					<image class="wt30 h30 mr10" src="/static/image/news.png"></image>
					<text class="ft12">{{ $t('zdy.ieo') }}</text>
				</navigator>
				<navigator url="/pages/market/second"  class="flex alcenter bgPart plr10 radius4 h40 mt5" style="height: 40px;">
					<image class="wt30 h25 mr10" src="/static/footer/gang1.png"></image>
					<text class="ft12">{{ $t('home.micro') }}</text>
				</navigator>
			</view>
		</view>
		<view class="w100 plr10 pb5 posRelt">
			<view class="abstrot zdx100 white" style="top:15%; left:10%;">
				<view class="ft16 bold">{{ $t('home.security') }}</view>
				<view class="mt5">{{ $t('home.leader') }}</view>
			</view>
			<image class="w100 h70" src="/static/image/banner.png"></image>
		</view>
		<view class=" w100 bgPart">
			<view class="ptb10 bdb_blue3 ft14 plr10 bold">{{ $t('home.updowns') }}</view>
			<view class="flex alcenter ft12 ptb5 blue4 plr10">
				<text style="flex: 1.5;">{{ $t('home.name') }}</text>
				<text class="flex1">{{ $t('home.new_price') }}</text>
				<text class="flex1 tr">{{ $t('home.fu') }}</text>
			</view>
			<navigator
				:url="'/pages/market/kline?legal_id=' + item.legal_id + '&currency_id=' + item.currency_id + '&symbol=' + item.currency_name + '/' + item.legal_name"
				class="flex alcenter ft12 ptb10 blue4 plr10 bdb_blue3"
				v-for="(item, i) in quoList" v-if="item.is_display==1"
				:key="i"
			>
				<view class="" style="flex: 1.5;">
					<view class="">
						<text class="gray_e ft14 bold ft16">{{ item.currency_name }}</text>
						/{{ item.legal_name }}
					</view>
				</view>
				<text class="flex1 bold gray_e ft16">{{ item.now_price }}</text>
				<text class="flex1 tr flex jsend">
					<text class="radius2 ptb5 white wt70 block tc" :class="{ bgRed: parseFloat(item.change) < 0, bgGreen: parseFloat(item.change) >= 0 || item.change == '' }">
						{{ item.change.substr(0, 1) == '-' ? '' : '+' }}{{ (item.change - 0) | toFixed2 }}%
					</text>
				</text>
			</navigator>
		</view>
		<view class="fixed w100 ht100 mask" @click.stop="hide" @touchmove.stop = "" :class="{ showMask: showLeft }">
			<view class="fixed bgPart w65 ht100 leftBox flex column" :class="{ isShow: showLeft }" @click.stop="stop">
				<view class="bgBlack pt60 pb20 plr20">
					<navigator url="/pages/mine/login" open-type="navigate" class="flex alcenter between" v-if="!token">
						<view>
							<view class="ft20 mb5">{{ $t('home.p_login') }}</view>
							<view class="ft14">{{ $t('home.welcome') }}</view>
						</view>
						<view><image src="/static/image/mores.png" class="wt20 h20"></image></view>
					</navigator>
					<navigator url="/pages/mine/userCenter" class="flex alcenter between" v-if="token">
						<view>
							<view class="ft20 mb5">{{ info.account }}</view>
							<view class="ft14">UID:{{ info.id }}</view>
						</view>
						<view><image src="/static/image/mores.png" class="wt20 h20"></image></view>
					</navigator>
				</view>
				<scroll-view scroll-y="true" show-scrollbar="true" class="flex1 pb30"  style="min-height: 300px;">
					<navigator v-if="token" url="/pages/mine/userCenter" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/personal.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('authentication.renzheng') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator v-if="info.is_seller" url="/pages/legal/store" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/shops.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('home.myshop') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator v-if="token" :url="'/pages/mine/invite?code=' + info.extension_code" class="flex alcenter ptb15 between plr20 ft14 bdb27">
						<view class="flex alcenter">
							<image src="/static/image/share.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('home.myshare') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<view  class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/sucerty.png" class="wt20 h20"></image>
							<text class="ml10">{{$t('about.theme')}}</text>
						</view>
						<switch @change="switchChange" :checked="theme=='light' ?  false:true "/>
					</view>
					<navigator url="/pages/market/second"  class="flex alcenter ptb15 between plr20 ft14 bdb_blue3 " style="height: 40px;">
						<view class="flex alcenter">
							<image src="/static/footer/gang1.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('home.micro') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="../legal/legal" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/account_about_image.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('home.legal') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="/pages/lockming/index" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/suocang.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('zdy.scwk') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="/pages/ieo/index" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/ieo.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('zdy.ieo') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="/pages/mine/security" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/sucerty.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('login.security') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="/pages/mine/collect_money" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/receivables.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('collect.method') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="/pages/mine/about" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/account_about_image.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('about.abt') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					
					<view class="mt30 plr20" v-if="token">
						<button type="primary" size="default" class="ft14" @click="logout">{{ $t('home.logout') }}</button>
					</view>
				</scroll-view>
			</view>
		</view>
<!-- 		<view class="kefu">
			<kefu></kefu>
		</view> -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	components:{
		// kefu
	},
	data() {
		return {
			quoListSwier:[],
			timer:"",
			bannerList: [],
			noticeList: [],
			quoList: [],
			title: 'Hello',
			
			showLeft: false,
			showMask: false,
			token: '',
			info: '',
			cny_rate: '',
			languages: {
				en: { name: 'English', img: '/static/image/en.png' },
				jp: { name: '日本語', img: '/static/image/jp.png' },
				//kor: { name: '한국어', img: '/static/image/kor.jpg' },
				hk: { name: '繁體中文', img: '/static/image/hk.png' },
				zh: { name: '中文', img: '/static/image/zh.png' },
			},
			lang: '',
			isshowlang: false,
		};
	},
	filters: {
		toFixed2: function(value, options) {
			value = Number(value);
			return value.toFixed(2);
		}
	},
	computed: {
		...mapState(['theme'])
	},
	onLoad() {
		var token = uni.getStorageSync('token');
		this.lang = uni.getStorageSync('lang') || 'zh';
		if(uni.getStorageSync('locale') !=uni.getStorageSync('lang')){
			this.$utils.initData({ url: 'set/lang', data: {lang:this.lang }, type: 'POST' }, res => {
			
				uni.setStorageSync('lang', this.lang);
				uni.setStorageSync('locale',this.lang);
				this.$i18n.locale = this.lang;
				this.isshowlang = false;
				this.changeFooter();
				this.showLeft = false;
				this.showMask = false;
				this.token = uni.getStorageSync('token');
				this.getBannerImg();
				this.getNoticeList();
			});
		}
		this.changeFooter();
		if (token) {
			this.getUserInfo();
		}
		
	},
	onShow() {
		this.$utils.setThemeTop(this.theme);
		this.$utils.setThemeBottom(this.theme);
		this.showLeft = false;
		this.showMask = false;
		this.token = uni.getStorageSync('token');
		this.getBannerImg();
		this.getNoticeList();
		this.quotation();
		this.timer=setInterval(()=>{
			this.quotation();
		},3000)
		// this.$socket.listenFun([{ event: 'sub', params: 'daymarket' }], res => {
		// 	var msg = JSON.parse(res);
		// 	for (var i = 0; i < this.quoList.length; i++) {
		// 		if (this.quoList[i].legal_name == msg.legal_name && this.quoList[i].currency_name == msg.currency_name) {
		// 			this.quoList[i].now_price = msg.now_price;
		// 			this.quoList[i].change = msg.change;
		// 		}
		// 	}
		// 	for (var i = 0; i < this.quoListSwier.length; i++) {
		// 		if (this.quoListSwier[i].legal_name == msg.legal_name && this.quoListSwier[i].currency_name == msg.currency_name) {
		// 			this.quoListSwier[i].now_price = msg.now_price;
		// 			this.quoListSwier[i].change = msg.change;
		// 		}
		// 	}
		// });
	},
	methods: {
		changeFooter() {
			uni.setTabBarItem({
				index: 0,
				text: this.$t('market.home')
			});
			uni.setTabBarItem({
				index: 1,
				text: this.$t('market.market')
			});
			uni.setTabBarItem({
				index: 2,
				text: this.$t('trade.bibi')
			});
			uni.setTabBarItem({
				index: 3,
				text: this.$t('assets.lever')
			});
			uni.setTabBarItem({
				index: 4,
				text: this.$t('assets.assets')
			});
		},
		// 切换主题
		switchChange(e){
			var ui  = (this.theme == 'light') ? 'dark' : 'light';
			this.$store.dispatch("changeTheme",ui);
			this.$utils.setThemeTop(this.theme);
			this.$utils.setThemeBottom(this.theme);
		},
		// 语言切换
		changeLang(lang) {
			this.$utils.initData({ url: 'set/lang', data: { lang }, type: 'POST' }, res => {
				console.log(lang);
				this.lang = lang;
				uni.setStorageSync('lang', lang);
				this.$i18n.locale = lang;
				this.isshowlang = false;
				this.changeFooter();
				this.showLeft = false;
				this.showMask = false;
				this.token = uni.getStorageSync('token');
				this.getBannerImg();
				this.getNoticeList();
			});
		},
		//轮播图
		getBannerImg() {
			uni.showLoading();
			this.$utils.initData({ url: 'news/list', data: { c_id: 5 }, type: 'POST' }, (res, msg) => {
				uni.stopPullDownRefresh();
				this.bannerList = res.list;
				uni.hideLoading();
			});
		},
		//公告
		getNoticeList() {
			this.$utils.initData({ url: 'news/list', data: { c_id: 4 }, type: 'POST' }, (res, msg) => {
				uni.stopPullDownRefresh();
				this.noticeList = res.list;
			});
		},
		//行情交易对
		quotation() {			
			this.$utils.initData({ url: 'currency/quotation_new', data: {}, type: 'get' }, (res, msg) => {			
				uni.stopPullDownRefresh();
				let usdtData = res.find(item => item.name == 'USDT');
				this.cny_rate = usdtData.fiat_convert_cny;
				this.quoListSwier=usdtData.quotation=usdtData.quotation.filter(item=>{
					if(item.is_display==1)return item;
				})
				this.quoList = usdtData.quotation.sort(function(a, b) {					
					return b.change - a.change;
				});
			});
		},
		show() {
			if (this.token) {
				this.getUserInfo();
			}
			this.showLeft = !this.showLeft;
		},
		hide() {
			this.showLeft = !this.showLeft;
		},
		stop() {},
		//获取用户信息
		getUserInfo() {
			var that = this;
			this.$utils.initDataToken({ url: 'user/info', data: {}, type: 'get' }, (res, msg) => {
				uni.stopPullDownRefresh();
				uni.setStorageSync('uid', msg.id);
				
				that.info = res;
			});
		},
		//退出登录
		logout() {
			this.$utils.initDataToken({ url: 'user/logout', data: {}, type: 'get' }, (res, msg) => {
				uni.clearStorageSync();
				this.$utils.showLayer(msg);
				uni.reLaunch({
					url: '/pages/mine/login'
				})
			});
		}
	},
	onHide() {
		clearInterval(this.timer);
		this.$socket.closeSocket();
	},
	onPullDownRefresh() {
		this.getBannerImg();
		this.getNoticeList();
		this.quotation();
	}
};
</script>

<style>
.head {
	top: var(--status-bar-height);
	left: 0;
	z-index: 999;
}
.content {
	/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
	/* padding-bottom: 20px; */
}
.headImg {
	width: 50upx;
	height: 50upx;
	/* left: 10px; */
}
.swiper {
	height: 300upx;
}
.bgIndex {
	background: #0a1b2b;
}
.bgParts {
	background: #061623;
}
.leftBox {
	left: -100%;
	top: 0;
	z-index: 9999;
	transition: all 0.5s ease-out;
	opacity: 0.5;
}
.isShow {
	left: 0;
	top: 0;
	z-index: 9999;
	transition: all 0.5s ease-out;
	opacity: 1;
}
.mask {
	top: 0;
	left: -100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
}
.showMask {
	left: 0;
	top: 0;
	z-index: 999;
	opacity: 1;
}
.langs:last-child {
	border-bottom: none;
}
.kefu{
	/* position: fixed; */
	bottom: 50upx;
	/* right: 0; */
}
.menus{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 20upx 0;
}
.menusitem{
	width: 25%;
	text-align: center;
	margin-bottom: 20upx;
	padding: 20upx 0 0;
}
.menusitem image{
	width: 60upx;
	display: block;
	height: 60upx;
	margin: 0 auto 20upx;
}
</style>
